.step-list {
    padding: 21px 0px;
    overflow: auto;
    ul {
      display: flex;
      width: 100%;
      margin: 0;
      padding: 0;
      width: max-content;
      li {
        width: 170px;
        list-style: none;
        float: left;
        .titleDot {
          display: flex;
          align-items: center;
          
          .bar {
            width: calc(100% - 18px);
            height: 2px;
            background-color: #3c6eff;
            margin: 0 4px;
            &.greyLine {
                background-color: #E8EBF2 ;
            }
          }
        }
        .detailData {
          .dotData {
            margin-top: 18px;
            width: 10px;
            height: 10px;
            background-color: #3c6eff;
            border-radius: 10px;
          }
          .orderName {
            margin-top: 8px;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #33353B;
            letter-spacing: 0;
            line-height: 20px;
            font-weight: 400;
            .textGrey {
                color:  #9B9FAB;
            }
          }
          .approveUserName {
            margin-top: 6px;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #9b9fab;
            letter-spacing: 0;
            font-weight: 400;
            display: flex;
            flex-direction: column;
            margin-bottom: 8px;
            :not(:first-child) {
              margin-top: 6px;
            }
          }
          .time {
            margin-top: 8px;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #9b9fab;
            letter-spacing: 0;
            font-weight: 400;
          }
        }
        & .dot {
          width: 10px;
          height: 10px;
          background-color: #3c6eff;
          border-radius: 10px;
        }
        & .dotGrey {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          opacity: 0.5;
          background: #F6F8FC;
          border: 2px solid rgba(212,215,225,1);
      
        }
        & .dotRed {
          width: 10px;
          height: 10px;
          background-color: red;
          border-radius: 10px;
        }
      }
      .titleDot {
        display: flex;
        .dot {
          width: 10px;
          height: 10px;
          background-color: #3c6eff;
          border-radius: 10px;
        }
        .bar {
          width: calc(100% - 18px);
          height: 2px;
          background-color: #3c6eff;
          margin: 0 4px;
        }
      }
    }
  }
  .step-active {
    background: #3c6eff !important;
    color: #fff !important;
    &::after {
      content: '' !important;
      border-left: 14px solid #3c6eff !important;
    }
  }

  
  